<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        // el:'#app',
        // template:'<h1>{{name}}</h1>',
        data:{
            name:"珠峰",
            age:100
        },
        beforeCreate() {
          //写一些三方插件的时候可能会用到
          // 我们时调用不到data中的属性的
          console.log(this.name)
          // this.$set(this,'qqq',666)
          this.aaaa= 6666444;
        },
        created() {
          // 在这个钩子中 可以做一些 初始话操作 例如 发送ajax请求
          // this.qqq = 666
          // 可以调用data methods computed中的属性的
          // this.$set(this,'name',666)
          console.log(this.aaaa)
        },
        beforeMount() {
          // console.log(this.$el)
          // debugger;
        },
        mounted() {
          this.timer = setInterval(() => {
            console.log(1111)
          }, 1000);
          // DOM渲染完成之后 触发这个函数  ；我么你可以在这个钩子中  操作DOM
        },
        // 更新的这两个钩子函数 只有当哪些能触发视图更新的 数据更改的时候 才会触发
        beforeUpdate() {
          console.log('beforeup',this.name)
          //数据更新了 但是视图还没有跟新  这里操作DOM的话是更新之前的DOM
        },
        updated() {
          // 视图更新完成； 也可以操作DOM 这里操作的是更新之后的DOM
        },
        // 在销毁函数中  我们一般用来移除事件 或者某些定时器
        beforeDestroy() {
          
        },
        destroyed() {
          console.log(this.name)
          clearInterval(this.timer)
        },
    });
    vm.$mount('#app')
</script>